<clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected">
    <clr-dg-action-bar *ngIf="user.isAdmin|| currentMember.role === 'PROJECT_MANAGER'">
        <div class="btn-group">
            <button type="button" class="btn btn-sm btn-secondary" (click)="onCreate()">
                <clr-icon shape="plus" size="16"></clr-icon>
                {{"APP_ADD"|translate}}
            </button>
            <button type="button" class="btn btn-sm btn-secondary" (click)="onDelete()" [disabled]="selected.length<1">
                <clr-icon shape="close"></clr-icon>
                {{"APP_DELETE"|translate}}
            </button>
        </div>
        <clr-dropdown [clrCloseMenuOnItemClick]="false" class="btn  btn-link" clrDropdownTrigger>
            <span id='member-action'>{{'APP_MEMBER_ACTION' | translate}}
                <clr-icon shape="caret down"></clr-icon></span>
            <clr-dropdown-menu *clrIfOpen>
                <label class="dropdown-header">{{'APP_MEMBER_SET' | translate}}</label>
                <button [disabled]="selected.length<1" clrDropdownItem
                        (click)="changeMembersRole(selected, 'CLUSTER_MANAGER')">{{'CLUSTER_MANAGER' | translate}}</button>
                <button [disabled]="selected.length<1" clrDropdownItem
                        (click)="changeMembersRole(selected, 'PROJECT_MANAGER')">{{'PROJECT_MANAGER' | translate}}</button>
            </clr-dropdown-menu>
        </clr-dropdown>
    </clr-dg-action-bar>
    <clr-dg-column>{{'APP_NAME'|translate}}</clr-dg-column>
    <clr-dg-column>{{'APP_EMAIL'|translate}}</clr-dg-column>
    <clr-dg-column>{{'APP_ROLE'|translate}}</clr-dg-column>
    <clr-dg-column>{{'APP_CREATED_DATE'|translate}}</clr-dg-column>

    <clr-dg-row *clrDgItems="let item of items" [clrDgItem]="item" [clrDgSelectable]="item.userName!==user.name">
        <clr-dg-cell>{{item.userName}}</clr-dg-cell>
        <clr-dg-cell>{{item.email | emailShow}}</clr-dg-cell>
        <clr-dg-cell>{{item.role | translate}}</clr-dg-cell>
        <clr-dg-cell>{{item.createdAt |date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>
        <clr-dg-pagination #pagination [(clrDgPage)]="page" [clrDgPageSize]="size" [clrDgTotalItems]="total"
                           (clrDgPageChange)="refresh()">
            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
            {{"APP_PAGER_TOTAL"|translate}} {{pagination.totalItems}} {{"APP_USER"|translate}}
        </clr-dg-pagination>
    </clr-dg-footer>
</clr-datagrid>
